<template>
  <nav id="navigation">
    <el-row>
      <el-col :span="3" @click.native="navigationBack">
        <i v-if="isCanBack" class="el-icon-back" />
      </el-col>
      <el-col :span="24" style="position: absolute; z-index:-1">
        <span>{{ titleVal }}</span>
      </el-col>
    </el-row>
  </nav>
</template>

<script>
import eventBus from '../api/eventBus';
export default {
  name: 'HeaderTitle',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return { isCanBack: false, topPage: ['home', 'amusement', 'official', 'square', 'personal'], titleVal: '' };
  },
  watch: {
    $route(to) {
      const toName = to.name;
      this.jugeRouter(toName);
    },
    title: {
      handler(newValue) {
        this.titleVal = newValue;
      },
      immediate: true
    }
  },
  created() {
    this.$nextTick(() => {
      eventBus.$on('changeTitle', (title) => {
        this.titleVal = title;
      });
    });
  },
  mounted() {
    this.jugeRouter(this.$route.name);
  },
  destroyed() {
    eventBus.$off('changeTitle');
  },
  methods: {
    navigationBack: function () {
      this.$router.goBack();
    },
    jugeRouter(name) {
      let isNeedShow = true;
      for (let i = 0; i < this.topPage.length; i++) {
        if (name === this.topPage[i]) {
          isNeedShow = false;
          break;
        }
      }
      this.isCanBack = isNeedShow;
      this.$emit('need-hidden-tab-bar', isNeedShow);
    }
  }
};
</script>

<style scoped>
    nav {
        background-color: white;
        width: 100%;
        height: 48px;
        border: solid rgb(210, 210, 210);
        border-width: 0 0 1px 0;
        position: fixed;
        margin: auto;
        top: 0;
    }

    div {
        text-align: center;
        line-height: 44px;
    }

    span {
        font-size: 16px;
        font-weight: bold;
    }

</style>
